<script setup lang="ts">
import {Chart as ChartJS, ArcElement, Tooltip, Legend} from 'chart.js'
import {Doughnut} from 'vue-chartjs'
import {storeToRefs} from "pinia";
import appStore from "@/store";

const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'right' // 将图例放置在图表的右侧
    }
  },
  cutout: '60%',
  radius: '70%'


}

const data = ref(
    {
      '技术面试': {
        labels: ['面试八股', '项目拷打', '个人素质', '职业规划'],
        datasets:
            [
              {
                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                data: [50, 30, 5, 5]
              }
            ]
      },
      '能力面试': {
        labels: ['面试八股', '项目拷打', '个人素质', '职业规划'],
        datasets:
            [
              {
                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                data: [40, 40, 20, 0]
              }
            ]
      },
      '项目面试': {
        labels: ['面试八股', '项目拷打', '个人素质', '职业规划'],
        datasets:
            [
              {
                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                data: [10, 70, 10, 10]
              }
            ]
      },
      '综合面试': {
        labels: ['面试八股', '项目拷打', '个人素质', '职业规划'],
        datasets:
            [
              {
                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                data: [30, 30, 20, 20]
              }
            ]
      },
      'HR面试': {
        labels: ['面试八股', '项目拷打', '个人素质', '职业规划'],
        datasets:
            [
              {
                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
                data: [0, 0, 60, 40]
              }
            ]
      },
    })
ChartJS.register(ArcElement, Tooltip, Legend)
const {interviewNewStore} = storeToRefs(appStore.useInterviewJsonStore)

</script>

<template>
  <Doughnut v-if="interviewNewStore.Settings.interviewType" :data="data[interviewNewStore.Settings.interviewType]" :options="options"/>
</template>

<style scoped lang="scss">

</style>